<template>
  <main>
    <Hero
     :title="title"
    />
    <section class="blog_area single-post-area section-padding">
      <div class="container">
        <div class="row">
          <div class="col-lg-8 posts-list">
            <div class="single-post">
              <div class="feature-img">
                <img class="img-fluid" src="../assets/img/medicine/article.png" alt="">
              </div>
              <div class="blog_details">
                <h2 style="color: #2d2d2d;">
                  {{articleTitle }}
                </h2>
                <ul class="blog-info-link mt-3 mb-4">
                  <li><a href="javascript:void(0)"><i class="fa fa-user"></i> 10 观看</a></li>
                  <li><a href="javascript:void(0)"><i class="fa fa-comments"></i> 3 评论</a></li>
                </ul>
                <p v-html="article"></p>
              </div>
            </div>
            <CommentList :key="change" :fileId="fileId"/>
            <Comment :fileId="fileId" />
          </div>
          <Slider/>
        </div>
      </div>
    </section>
  </main>
</template>

<script>
import Slider from "../components/slider"
import Comment from "../components/comment"
import CommentList from "../components/comment-list"
import Hero from "../components/hero"
import {getArticleContent} from "@/api/blog";
export default {
  name: "article",
  components: {
    Slider,
    Comment,
    CommentList,
    Hero
  },
  created() {
    this.articleId = this.$route.params.id
  },
  data() {
    return {
      title: "文 章",
      articleTitle: '',
      articleId: '',
      article: '',
      medicineContent: '',
      change: 1
    }
  },
  mounted() {
    this.articleContent()
  },
  provide() {
    return {
      fatherMethod: this.forceRerender,
    };
  },
  methods: {
    articleContent(){
      console.log(this.articleId)
      if (this.articleId){
        getArticleContent({articleId:this.articleId}).then((res) =>{
          if (res != null){
            this.articleTitle = res.articleTitle
            this.article = res.articleContent
          }
        })
      }
    },
    forceRerender() {
      this.change += 1;
    }
  }
}
</script>

<style scoped>
a:hover{
  text-decoration-line: none;
  cursor:pointer
}
</style>
